<template>
  <view class="agreementdetail">
    <view class="item" v-for="(item, index) in orderItem" :key="index">
      <view class="box">
        <view class="title u-border-bottom">
          <text>第{{item.Issues_of}}期</text>
          <text>{{item.type | getterStatus}}</text>
        </view>
        <view class="body">
          <view class="body-item">
            <text>支付金额</text>
            <text>￥{{item.money}}</text>
          </view>
          <view class="body-item">
            <text>代扣时间</text>
            <text>{{item.time }}</text>
          </view>
          <view  v-if="item.type != 1">
            <u-button type="primary" size="mini"  :ripple="true" ripple-bg-color="#909399" shape="circle"  throttle-time="500" @click="onPay(item)">立即支付</u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getOrderDetail, onPay} from "../../common/http";

export default {
  name: "paylist",
  data(){
    return{
      orderItem: [],
      id: ''
    }
  },
  onLoad(option) {
    if(!option.id){
      uni.showToast({
        icon: 'none',
        title: '参数不正确'
      })
      uni.navigateBack()
      return
    }
    this.init(option.id)
  },
  methods: {
    init(id){
      this.id = id
      getOrderDetail({id:this.id}).then(res=>{
        this.orderItem = res.data.data.order_item
      })
    },
    onPay(item){
      onPay({id:item.id}).then(res=>{
        if(res.data.code == 0){
          my.tradePay({
            // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
            tradeNO: res.data.data,
            success: (res) => {
              console.log(res)
            }
          });
        }else{
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }

      })
    },
    onSurplus(){
    }
  },
  filters:{
    getterStatus(value){
      if(value){
        switch (value){
          case 1 :
            return '支付成功'
          case 2 :
            return '待支付'
          case 4 :
            return '已退款'
          case 5 :
            return '退款中'
          default:
            return '未知状态';
        }
      }else{
        return ''
      }
    },
  }
}
</script>


<style lang="scss">
.agreementdetail{
  padding-bottom: 20px;
  padding-top: calc(var(--status-bar-height) + 140rpx);
  .item{
    padding: 20rpx;
    .box{
      background-color: #FFFFFF;
      padding: 20rpx;
      border-radius: 20rpx;
    }
    .title{
      display: flex;
      padding: 20rpx 0;
      justify-content: space-between;
      font-weight: 700;
      font-size: 28rpx;
    }
    .body{
      .body-item{
        display: flex;
        padding: 20rpx 0;
        justify-content: space-between;
        font-size: 26rpx;
        .order{
          /* white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          max-width: 200rpx; */
        }
      }
    }

  }
  .dibu{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
}
</style>